<template>
  <div class="all-xc">
    <loading v-if="!allAlbumsData" />
    <nodata v-else-if="!allAlbumsData.length"></nodata>
    <div v-else class="item">
      <div class="album-show">
        <div class="title">
          <span>公开相册</span>
        </div>
        <div class="content">
          <ul>
            <li v-for="data in allAlbumsData" :key="data.name" v-if="data.albums.length">
              <div class="li-wrapper">
                <div
                  class="img"
                  @click="showChildrenPhoto(data)"
                  :style="setImage(data.albums[0].photoUrl)"
                >
                  <span class="num">{{ data.photosNumber }}</span>
                  <div class="tags" v-if="data.tags.length">
                    <span v-for="tag in data.tags" :key="tag">{{ tag }}</span>
                  </div>
                </div>
                <div class="introduce">
                  <div class="int-label">{{ data.name }}</div>
                  <div class="user-name">{{ data.userName }}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setImage } from "@/public/setBgImage.js";
import { imageUrl } from "@/public/uri.js";
import { mapState, mapActions } from "Vuex";
export default {
  name: "all-xc",
  data() {
    return {
      allAlbumsData: ""
    };
  },
  mounted() {
    this.setImage = setImage;
    this.getAllAlbumsData().then(res => {
      this.allAlbumsData = res.data.data;
    });
  },
  methods: {
    showChildrenPhoto(data) {
      this.$router.push("/albums/" + data._id);
    },
    ...mapActions("user", ["getAllAlbumsData"])
  }
};
</script>


<style lang="sass" scoped>
@import '@/assets/default.sass'
.all-xc
  width: 100%
  height: 100%
  background-color: #fff
  .item
    width: 100%
    height: 100%
    overflow: hidden
    .album-show
      width: 100%
      height: 100%
      padding: 0 2%
      .title
        width: 100%
        height: 60px
        line-height: 60px
        border-bottom: 1px solid #eee
        @include flex(space-between,center)
        >span
          font-size: 16px
          font-weight: 700
          color: #333
      .content
        width: 100%
        overflow: hidden
        >ul
          width: 100%
          padding: 10px 0
          overflow: hidden
          >li
            width: 18.999%
            display: inline-block
            overflow: hidden
            margin-right: calc(5%/4) 
            margin-bottom: 20px   
            &:nth-child(5n)   
              margin-right: 0 
            .li-wrapper  
              box-shadow: 0px 0px 2px rgba(0,0,0,.1)
              background-color: #fff 
              overflow: hidden
              .img
                width: 100%
                height: 140px  
                position: relative
                cursor: pointer                
                overflow: hidden
                background-size: cover
                background-position: 50% 50%                       
                .num
                  position: absolute
                  top: 3px
                  right: 3px
                  width: 24px
                  height: 16px
                  color: #eb2001
                  border-radius: 5px
                  @include flex(center,center)              
                .tags             
                  transition: all .2s   
                  position: absolute
                  bottom: -30px
                  left: 0
                  width: 100%
                  height: 30px
                  background-color: rgba(0,0,0,.3)
                  padding: 0 3%
                  >span
                    line-height: 30px
                    height: 30px
                    color: #0487dc                  
                    &:after
                      content: " | "
                    &:last-child
                      &:after
                        content: ""  
                &:hover
                  .tags
                    bottom: 0
                    transition: all .2s            
              .introduce              
                width: 100%
                height: 40px
                padding: 0 5px
                background-color: #eee
                overflow: hidden
                .int-label
                  width: 100%
                  height: 20px
                  line-height: 20px
                  overflow: hidden
                  text-overflow: ellipsis
                  white-space: nowrap
                .user-name
                  width: 100%
                  line-height: 20px
                  height: 20px
                  color: #999
                  font-size: 12px
</style>